<template>
    <div>
        <button @click="showcomponent=true">显示LifeCycle组件</button>
        <button @click="showcomponent=false">隐藏LifeCycle组件</button>
        <LifeCycle v-if="showcomponent"></LifeCycle>
        <Watch></Watch>
        <AsyncComponent v-if="showcomponent"></AsyncComponent>
    </div>
</template>

<script>
    import LifeCycle from './components/LifeCycle.vue'
    //同步引入组件
    // import AsyncComponent from './components/AsyncComponent.vue'
    import Watch from './components/Watch.vue'
    import {defineAsyncComponent} from 'vue'
    // import xxx from ''
    // import 'xx.css'
    // const tim=import("./App1.vue");
    // console.log('import函数的结果===>',tim);
    export default {
        data(){
            return {
                showcomponent:false
            }
        },
        components:{
            LifeCycle,
            Watch,
            // AsyncComponent
            //定义异步组件 defineAsyncComponent()定义异步组件。异步函数必须返回一个Promise对象.
            // AsyncComponent:defineAsyncComponent(()=>{
            //     return new Promise((resolve,reject)=>{
            //         setTimeout(() => {
            //             resolve(import("./components/AsyncComponent.vue"))
            //         }, 5000);
            //     })
            // })
            //vue里面定义异步懒加载组件 用defineAsyncComponent 然后用import()函数引入.
            //用import()引入的组件会被打包分片,会独立打包成一个js文件。import()函数返回一个Promise对象
            //只有需要显示这个组件的时候才会加载对应的js打包文件.
            //优化了组件加载，首次只需要加载必须显示的组件的，第一次不需要显示的组件 就写成异步组件.
            //首次加载性能.
            // 路由 ===> compoents:()=>import("xxxxxxxxx");
            AsyncComponent:defineAsyncComponent(()=>import("./components/AsyncComponent.vue"))
        }
    }
</script>
<!-- scoped局部样式 -->
<style lang="scss" scoped>
// 如果希望当前组建的样式可以作用到子组件
// :deep() {} 设置的样式可以作用到后代组件.
// :global(){} 设置样式是全局作用
:deep(h3){
    color:red;
}
</style>